<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>HTML 备忘清单
 &#x26;  html cheatsheet &#x26;  Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="HTML 备忘清单
===

此 HTML 快速参考备忘单以可读布局列出了常见的 HTML 和 HTML5 标记。

入门，为开发人员分享快速参考备忘单。">
<meta keywords="html,reference,Quick,Reference,cheatsheet,cheat,sheet">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="..\style\style.css">
<link rel="stylesheet" href="..\style\katex.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="..\index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
  <path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
  <path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
  <path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
  <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/html.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
  <path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
  <path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script src="../js/dark.js?v=1.4.1"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="html-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" height="1em" width="1em">
  <path d="m64 32 34.94 403.21L255.77 480 413 435.15 448 32Zm308 132H188l4 51h176l-13.51 151.39L256 394.48l-98.68-28-6.78-77.48h48.26l3.42 39.29L256 343.07l53.42-14.92L315 264H148l-12.59-149.59H376.2Z"></path>
</svg>
<a aria-hidden="true" tabindex="-1" href="#html-备忘清单"><span class="icon icon-link"></span></a>HTML 备忘清单</h1><div class="wrap-body">
<p>此 HTML 快速参考备忘单以可读布局列出了常见的 <code>HTML</code> 和 <code>HTML5</code> 标记。</p>
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
  <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#hellohtml">hello.html</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#注释-comment">注释 Comment</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#段落-paragraph">段落 Paragraph</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html-链接">HTML 链接</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#image-标签">Image 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#文本格式标签">文本格式标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#标题">标题</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#section-divisions">Section Divisions</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#内部框架">内部框架</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html-中的-javascript">HTML 中的 JavaScript</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#外部-javascript">外部 JavaScript</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html-中的-css">HTML 中的 CSS</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#外部样式表">外部样式表</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html5-标签">HTML5 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#页面">页面</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#标题导航">标题导航</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-tags">HTML5 Tags</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-video">HTML5 Video</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-1">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-audio">HTML5 Audio</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-2">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-ruby">HTML5 Ruby</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-3">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-kdi">HTML5 kdi</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-4">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-progress">HTML5 progress</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html5-mark">HTML5 mark</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-表格">HTML 表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#table-示例">Table 示例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html表格标签">HTML表格标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#td-属性">&#x3C;td> 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#th-属性">&#x3C;th> 属性</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-列表">HTML 列表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#无序列表">无序列表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#有序列表">有序列表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#定义列表">定义列表</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-表单">HTML 表单</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#form-标签">Form 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-5">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#form-属性">Form 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#label-标签">Label 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#input-标签">Input 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-6">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#textarea-标签">Textarea 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-7">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#radio-buttons">Radio Buttons</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-8">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#checkboxes">Checkboxes</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-9">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#select-标签">Select 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-10">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#fieldset-标签">Fieldset 标签</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-11">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#数据列表标签html5">数据列表标签（HTML5）</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-12">↓ 预览</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#提交和重置按钮">提交和重置按钮</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#-预览-13">↓ 预览</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-input-标签">HTML input 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#input-属性">Input 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#input-类型">Input 类型</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#html5-中的新输入类型">HTML5 中的新输入类型</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#input-css-选择器">Input CSS 选择器</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#html-meta-标签">HTML meta 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#meta-标签">Meta 标签</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#常用-meta">常用 Meta</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#常用-meta-1">常用 Meta</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#open-graph">Open Graph</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#twitter-卡片">Twitter 卡片</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#geotagging">Geotagging</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#标签语义化">标签语义化</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#复杂布局">复杂布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#复杂布局-1">复杂布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#区域语义化">区域语义化</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#页面头语义化">页面头语义化</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="hellohtml"><a aria-hidden="true" tabindex="-1" href="#hellohtml"><span class="icon icon-link"></span></a>hello.html</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-2-->
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token doctype"><span class="token punctuation">&#x3C;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>head</span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>title</span><span class="token punctuation">></span></span>HTML5 Boilerplate<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>title</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>head</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>body</span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span>Hello world, hello 备忘清单!<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>body</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>html</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>或者在 <a href="https://jsfiddle.net/Randy8080/1e4wz20b/">jsfiddle</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="注释-comment"><a aria-hidden="true" tabindex="-1" href="#注释-comment"><span class="icon icon-link"></span></a>注释 Comment</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 这是代码注释 --></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">&#x3C;!--
</span></span><span class="code-line"><span class="token comment">  或者你可以注释掉一个
</span></span><span class="code-line"><span class="token comment">  大量的行。
</span></span><span class="code-line"><span class="token comment">--></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="段落-paragraph"><a aria-hidden="true" tabindex="-1" href="#段落-paragraph"><span class="icon icon-link"></span></a>段落 Paragraph</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>我来自快速参考<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>分享快速参考备忘单。<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p">段落元素</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="html-链接"><a aria-hidden="true" tabindex="-1" href="#html-链接"><span class="icon icon-link"></span></a>HTML 链接</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://github.com/jaywcjlove/reference<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  Github
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:jack@abc.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮箱<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel:+123456789<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电话<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sms:+123456789&#x26;body=ha%20ha<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  短信
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>





















<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>href</code></td><td align="left">超链接指向的 URL</td></tr><tr><td align="left"><code>rel</code></td><td align="left">链接 URL 的关系</td></tr><tr><td align="left"><code>target</code></td><td align="left">链接目标位置：<code>_self</code>/<code>_blank</code>/<code>_top</code>/<code>_parent</code></td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attributes">&#x3C;a> 属性</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="image-标签"><a aria-hidden="true" tabindex="-1" href="#image-标签"><span class="icon icon-link"></span></a>Image 标签</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>img</span> <span class="token attr-name">loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lazy<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://xxx.png<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>在此处描述图像<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<hr>



































<table><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td><code>src</code> <em>(URL/路径)</em></td><td>必填，图片位置</td></tr><tr><td></td><td><code>alt</code></td><td>描述图像</td></tr><tr><td></td><td><code>width</code></td><td>图像宽度</td></tr><tr><td></td><td><code>height</code></td><td>图像高度</td></tr><tr><td></td><td><code>loading</code></td><td>浏览器应该如何加载</td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img">图像嵌入元素</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="文本格式标签"><a aria-hidden="true" tabindex="-1" href="#文本格式标签"><span class="icon icon-link"></span></a>文本格式标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>b</span><span class="token punctuation">></span></span>粗体文字<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>b</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>strong</span><span class="token punctuation">></span></span>这段文字很重要<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>strong</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>i</span><span class="token punctuation">></span></span>斜体文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>i</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>em</span><span class="token punctuation">></span></span>这段文字被强调<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>em</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>u</span><span class="token punctuation">></span></span>下划线文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>u</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>pre</span><span class="token punctuation">></span></span>预格式化文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>pre</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>code</span><span class="token punctuation">></span></span>源代码<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>code</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>del</span><span class="token punctuation">></span></span>删除的文字<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>del</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>mark</span><span class="token punctuation">></span></span>突出显示的文本 (HTML5)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>mark</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ins</span><span class="token punctuation">></span></span>插入的文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ins</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>sup</span><span class="token punctuation">></span></span>使文本上标<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>sup</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>sub</span><span class="token punctuation">></span></span>使文本下标<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>sub</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>small</span><span class="token punctuation">></span></span>使文本变小<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>small</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>pre</span><span class="token punctuation">></span></span>预格式化文本<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>pre</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>kbd</span><span class="token punctuation">></span></span>Ctrl<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>kbd</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>blockquote</span><span class="token punctuation">></span></span>文本块引用<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>blockquote</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="标题"><a aria-hidden="true" tabindex="-1" href="#标题"><span class="icon icon-link"></span></a>标题</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span> 这是标题 1 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h2</span><span class="token punctuation">></span></span> 这是标题 2 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h2</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h3</span><span class="token punctuation">></span></span> 这是标题 3 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h3</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h4</span><span class="token punctuation">></span></span> 这是标题 4 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h4</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h5</span><span class="token punctuation">></span></span> 这是标题 5 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h5</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h6</span><span class="token punctuation">></span></span> 这是标题 6 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h6</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>您的页面上应该只有一个 <code>h1</code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="section-divisions"><a aria-hidden="true" tabindex="-1" href="#section-divisions"><span class="icon icon-link"></span></a>Section Divisions</h3><div class="wrap-body">





























<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>&#x3C;div>&#x3C;/div></code></td><td align="left">页面内容的划分或部分</td></tr><tr><td align="left"><code>&#x3C;span>&#x3C;/span></code></td><td align="left">其他内容中的文本部分</td></tr><tr><td align="left"><code>&#x3C;p>&#x3C;/p></code></td><td align="left">文本段落</td></tr><tr><td align="left"><code>&#x3C;br></code></td><td align="left">换行</td></tr><tr><td align="left"><code>&#x3C;hr></code></td><td align="left">水平分割线</td></tr></tbody></table>
<p>这些标签用于将页面划分为多个部分</p>
</div></div></div><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="内部框架"><a aria-hidden="true" tabindex="-1" href="#内部框架"><span class="icon icon-link"></span></a>内部框架</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>iframe</span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inlineFrameExample<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Inline Frame Example<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">frameborder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&#x26;layer=mapnik<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>iframe</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<h4 id="-预览"><a aria-hidden="true" tabindex="-1" href="#-预览"><span class="icon icon-link"></span></a>↓ 预览</h4>
<iframe id="inlineFrameExample" title="Inline Frame Example" width="100%" height="200" frameborder="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&#x26;layer=mapnik">
</iframe>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe">内联框架元素</a></p>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="html-中的-javascript"><a aria-hidden="true" tabindex="-1" href="#html-中的-javascript"><span class="icon icon-link"></span></a>HTML 中的 JavaScript</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">  <span class="token keyword">let</span> text <span class="token operator">=</span> <span class="token string">"Hello 快速参考"</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">  <span class="token function">alert</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="外部-javascript"><a aria-hidden="true" tabindex="-1" href="#外部-javascript"><span class="icon icon-link"></span></a>外部 JavaScript</h4>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>body</span><span class="token punctuation">></span></span>
</span><span class="code-line">  ...
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>body</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="html-中的-css"><a aria-hidden="true" tabindex="-1" href="#html-中的-css"><span class="icon icon-link"></span></a>HTML 中的 CSS</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css">    <span class="token selector">h1</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css">        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">purple</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css">    <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>style</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="外部样式表"><a aria-hidden="true" tabindex="-1" href="#外部样式表"><span class="icon icon-link"></span></a>外部样式表</h4>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>head</span><span class="token punctuation">></span></span>
</span><span class="code-line">  ...
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>head</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="html5-标签"><a aria-hidden="true" tabindex="-1" href="#html5-标签"><span class="icon icon-link"></span></a>HTML5 标签</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="页面"><a aria-hidden="true" tabindex="-1" href="#页面"><span class="icon icon-link"></span></a>页面</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>body</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>header</span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>nav</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>nav</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>header</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>main</span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>h1</span><span class="token punctuation">></span></span>快速参考<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>main</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>footer</span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>©2023 快速参考<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>footer</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>body</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="标题导航"><a aria-hidden="true" tabindex="-1" href="#标题导航"><span class="icon icon-link"></span></a>标题导航</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>header</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>nav</span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</span><span class="token punctuation">></span></span>
</span><span class="code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>编辑页面<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Twitter<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Facebook<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ul</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>nav</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>header</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-4"><div class="wrap-header h3wrap"><h3 id="html5-tags"><a aria-hidden="true" tabindex="-1" href="#html5-tags"><span class="icon icon-link"></span></a>HTML5 Tags</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4-->









































































































































<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article">article</a></td><td align="left">独立的内容</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside">aside</a></td><td align="left">次要内容</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio">audio</a></td><td align="left">嵌入声音或音频流</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/bdi">bdi</a></td><td align="left">双向隔离元件</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas">canvas</a></td><td align="left">通过JavaScript绘制图形</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/data">data</a></td><td align="left">机器可读内容</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist">datalist</a></td><td align="left">一组预定义选项</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details">details</a></td><td align="left">其他信息</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog">dialog</a></td><td align="left">对话框或子窗口</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed">embed</a></td><td align="left">嵌入外部应用程序</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figcaption">figcaption</a></td><td align="left">图形的标题或图例</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure">figure</a></td><td align="left">插图</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/footer">footer</a></td><td align="left">页脚或最不重要的</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/header">header</a></td><td align="left">刊头或重要信息</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main">main</a></td><td align="left">文件的主要内容</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/mark">mark</a></td><td align="left">突出显示的文本</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meter">meter</a></td><td align="left">已知范围内的标量值</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav">nav</a></td><td align="left">导航链接的一部分</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/output">output</a></td><td align="left">计算的结果</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/picture">picture</a></td><td align="left">用于多个图像源的容器</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/progress">progress</a></td><td align="left">任务的完成进度</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/rp">rp</a></td><td align="left">提供回退括号</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/rt">rt</a></td><td align="left">定义字符的发音</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ruby">ruby</a></td><td align="left">表示ruby注释</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section">section</a></td><td align="left">一系列相关内容中的组</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source">source</a></td><td align="left">媒体元素的资源</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/summary">summary</a></td><td align="left">元素的摘要</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template">template</a></td><td align="left">定义HTML片段</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/time">time</a></td><td align="left">时间或日期</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/track">track</a></td><td align="left">媒体元素的字幕信息</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video">video</a></td><td align="left">嵌入视频</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/wbr">wbr</a></td><td align="left">换行机会</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="html5-video"><a aria-hidden="true" tabindex="-1" href="#html5-video"><span class="icon icon-link"></span></a>HTML5 Video</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>video</span> <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">    很抱歉，您的浏览器不支持嵌入式视频。
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>video</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<h4 id="-预览-1"><a aria-hidden="true" tabindex="-1" href="#-预览-1"><span class="icon icon-link"></span></a>↓ 预览</h4>
<video controls width="100%">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    很抱歉，您的浏览器不支持嵌入式视频。
</video>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="html5-audio"><a aria-hidden="true" tabindex="-1" href="#html5-audio"><span class="icon icon-link"></span></a>HTML5 Audio</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>audio</span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">controls</span>
</span></span><span class="code-line"><span class="token tag">  <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">    您的浏览器不支持音频元素。
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>audio</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<h4 id="-预览-2"><a aria-hidden="true" tabindex="-1" href="#-预览-2"><span class="icon icon-link"></span></a>↓ 预览</h4>
<p><audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
您的浏览器不支持音频元素。
</audio></p>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="html5-ruby"><a aria-hidden="true" tabindex="-1" href="#html5-ruby"><span class="icon icon-link"></span></a>HTML5 Ruby</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ruby</span><span class="token punctuation">></span></span>
</span><span class="code-line">  汉 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rt</span><span class="token punctuation">></span></span>hàn<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span>
</span><span class="code-line">  字 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rt</span><span class="token punctuation">></span></span>zì<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span>
</span><span class="code-line">  拼 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rt</span><span class="token punctuation">></span></span>pīn<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span>
</span><span class="code-line">  音 <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rt</span><span class="token punctuation">></span></span>yīn<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>rp</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ruby</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<h4 id="-预览-3"><a aria-hidden="true" tabindex="-1" href="#-预览-3"><span class="icon icon-link"></span></a>↓ 预览</h4>
<!--rehype:wrap-style=text-align: center;-->
<ruby style="font-size: 4rem;">
  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
  拼 <rp>(</rp><rt>pīn</rt><rp>)</rp>
  音 <rp>(</rp><rt>yīn</rt><rp>)</rp>
</ruby>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="html5-kdi"><a aria-hidden="true" tabindex="-1" href="#html5-kdi"><span class="icon icon-link"></span></a>HTML5 kdi</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>User <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>bdi</span><span class="token punctuation">></span></span>hrefs<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>bdi</span><span class="token punctuation">></span></span>: 60 points<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>User <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>bdi</span><span class="token punctuation">></span></span>jdoe<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>bdi</span><span class="token punctuation">></span></span>: 80 points<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>User <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>bdi</span><span class="token punctuation">></span></span>إيان<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>bdi</span><span class="token punctuation">></span></span>: 90 points<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ul</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="-预览-4"><a aria-hidden="true" tabindex="-1" href="#-预览-4"><span class="icon icon-link"></span></a>↓ 预览</h4>
<ul>
 <li>User <bdi>hrefs</bdi>: 60 points</li>
 <li>User <bdi>jdoe</bdi>: 80 points</li>
 <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="html5-progress"><a aria-hidden="true" tabindex="-1" href="#html5-progress"><span class="icon icon-link"></span></a>HTML5 progress</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>progress</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>progress</span><span class="token punctuation">></span></span>
</span></code></pre>
<p><progress value="50" max="100" style="width: 100%"></progress></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="html5-mark"><a aria-hidden="true" tabindex="-1" href="#html5-mark"><span class="icon icon-link"></span></a>HTML5 mark</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>我爱<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>mark</span><span class="token punctuation">></span></span>备忘清单<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>mark</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>我爱<mark>备忘清单</mark></p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="html-表格"><a aria-hidden="true" tabindex="-1" href="#html-表格"><span class="icon icon-link"></span></a>HTML 表格</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="table-示例"><a aria-hidden="true" tabindex="-1" href="#table-示例"><span class="icon icon-link"></span></a>Table 示例</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>table</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>thead</span><span class="token punctuation">></span></span>
</span><span class="code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>name<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>age<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>thead</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tbody</span><span class="token punctuation">></span></span>
</span><span class="code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>Roberta<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>39<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>Oliver<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>td</span><span class="token punctuation">></span></span>25<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>td</span><span class="token punctuation">></span></span>
</span><span class="code-line">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tr</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>tbody</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>table</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="html表格标签"><a aria-hidden="true" tabindex="-1" href="#html表格标签"><span class="icon icon-link"></span></a>HTML表格标签</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->

















































<table><thead><tr><th align="left">标签</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table">&#x3C;table></a></td><td align="left">定义表格</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th">&#x3C;th></a></td><td align="left">定义表格中的标题单元格</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr">&#x3C;tr></a></td><td align="left">定义表中的行</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td">&#x3C;td></a></td><td align="left">定义表格中的单元格</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/caption">&#x3C;caption></a></td><td align="left">定义表格标题</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup">&#x3C;colgroup></a></td><td align="left">定义一组列</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col">&#x3C;col></a></td><td align="left">定义表中的列</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/thead">&#x3C;thead></a></td><td align="left">对标题内容进行分组</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tbody">&#x3C;tbody></a></td><td align="left">将正文内容分组</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tfoot">&#x3C;tfoot></a></td><td align="left">对页脚内容进行分组</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="td-属性"><a aria-hidden="true" tabindex="-1" href="#td-属性"><span class="icon icon-link"></span></a>&#x3C;td> 属性</h3><div class="wrap-body">





















<table><thead><tr><th align="left">属性</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>colspan</code></td><td align="left">单元格应跨越的列数</td></tr><tr><td align="left"><code>headers</code></td><td align="left">单元格与一个或多个标题单元格相关</td></tr><tr><td align="left"><code>rowspan</code></td><td align="left">单元格应跨越的行数</td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td#attributes">td#属性</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="th-属性"><a aria-hidden="true" tabindex="-1" href="#th-属性"><span class="icon icon-link"></span></a>&#x3C;th> 属性</h3><div class="wrap-body">





























<table><thead><tr><th align="left">属性</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>colspan</code></td><td align="left">单元格应跨越的列数</td></tr><tr><td align="left"><code>headers</code></td><td align="left">单元格与一个或多个标题单元格相关</td></tr><tr><td align="left"><code>rowspan</code></td><td align="left">单元格应跨越的行数</td></tr><tr><td align="left"><code>abbr</code></td><td align="left">单元格内容的描述</td></tr><tr><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attr-scope">scope</a></td><td align="left">表头元素(在&#x3C;th>中定义)关联的单元格</td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attributes">th#属性</a></p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="html-列表"><a aria-hidden="true" tabindex="-1" href="#html-列表"><span class="icon icon-link"></span></a>HTML 列表</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="无序列表"><a aria-hidden="true" tabindex="-1" href="#无序列表"><span class="icon icon-link"></span></a>无序列表</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm an item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm another item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm another item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ul</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul">无序列表元素</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="有序列表"><a aria-hidden="true" tabindex="-1" href="#有序列表"><span class="icon icon-link"></span></a>有序列表</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ol</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm the first item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm the second item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span><span class="token punctuation">></span></span>I'm the third item<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>li</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>ol</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ol">有序列表元素</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="定义列表"><a aria-hidden="true" tabindex="-1" href="#定义列表"><span class="icon icon-link"></span></a>定义列表</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dl</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dt</span><span class="token punctuation">></span></span>A Term<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dt</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dd</span><span class="token punctuation">></span></span>Definition of a term<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dd</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dt</span><span class="token punctuation">></span></span>Another Term<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dt</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>dd</span><span class="token punctuation">></span></span>Definition of another term<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dd</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>dl</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dl">描述列表元素</a></p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="html-表单"><a aria-hidden="true" tabindex="-1" href="#html-表单"><span class="icon icon-link"></span></a>HTML 表单</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="form-标签"><a aria-hidden="true" tabindex="-1" href="#form-标签"><span class="icon icon-link"></span></a>Form 标签</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>POST<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>api/login<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>邮箱: <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>br</span><span class="token punctuation">/></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>密码:<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pw<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>br</span><span class="token punctuation">/></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>登录<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>br</span><span class="token punctuation">/></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ck<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ck<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ck<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>记住我<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>form</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="-预览-5"><a aria-hidden="true" tabindex="-1" href="#-预览-5"><span class="icon icon-link"></span></a>↓ 预览</h4>
<form method="POST" action="api/login" style="padding: 20px;">
  <label for="email">邮箱: </label>
  <input type="email" id="email" name="email" class="border border-slate-400 mt-2">
  <br>
  <label for="pwd">密码:</label>
  <input type="password" id="pwd" name="pwd" class="border border-slate-400 mt-2">
  <br>
  <input type="submit" value="登录" class="mt-2">
  <br>
  <input type="checkbox" id="ck" name="ck" class="mt-2">
  <label for="ck">记住我</label>
</form>
<p>HTML <code>&#x3C;form></code> 元素用于收集信息并将其发送到外部源。</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="form-属性"><a aria-hidden="true" tabindex="-1" href="#form-属性"><span class="icon icon-link"></span></a>Form 属性</h3><div class="wrap-body">

































<table><thead><tr><th align="left">属性</th><th align="left">说明</th></tr></thead><tbody><tr><td align="left"><code>name</code></td><td align="left">脚本形式的名称</td></tr><tr><td align="left"><code>action</code></td><td align="left">表单脚本的URL</td></tr><tr><td align="left"><code>method</code></td><td align="left">HTTP方法，<code>POST</code>/<code>GET</code> <em>(默认)</em></td></tr><tr><td align="left"><code>enctype</code></td><td align="left">介质类型，请参见<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/enctype">enctype</a></td></tr><tr><td align="left"><code>onsubmit</code></td><td align="left">提交表单时运行</td></tr><tr><td align="left"><code>onreset</code></td><td align="left">在窗体重置时运行</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="label-标签"><a aria-hidden="true" tabindex="-1" href="#label-标签"><span class="icon icon-link"></span></a>Label 标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 嵌套标签 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span><span class="token punctuation">></span></span>Click me 
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 'for' 属性 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Click me<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</span></code></pre>
<p><code>for</code>在标签中引用输入的<code>id</code>属性</p>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="input-标签"><a aria-hidden="true" tabindex="-1" href="#input-标签"><span class="icon icon-link"></span></a>Input 标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name:<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="-预览-6"><a aria-hidden="true" tabindex="-1" href="#-预览-6"><span class="icon icon-link"></span></a>↓ 预览</h4>
<form style="padding: 20px;">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" class="border border-slate-400">
</form>
<p>请参阅：<a href="/html#html-input-tags">HTML输入标记</a></p>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="textarea-标签"><a aria-hidden="true" tabindex="-1" href="#textarea-标签"><span class="icon icon-link"></span></a>Textarea 标签</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>textarea</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>address<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>textarea</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<h4 id="-预览-7"><a aria-hidden="true" tabindex="-1" href="#-预览-7"><span class="icon icon-link"></span></a>↓ 预览</h4>
<form style="padding: 20px;">
    <textarea rows="2" cols="30" name="address" id="address" class="border border-slate-400" style="width: 100%"></textarea>
</form>
<p>Textarea 是一个多行文本输入控件</p>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="radio-buttons"><a aria-hidden="true" tabindex="-1" href="#radio-buttons"><span class="icon icon-link"></span></a>Radio Buttons</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Male<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>f<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Female<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="-预览-8"><a aria-hidden="true" tabindex="-1" href="#-预览-8"><span class="icon icon-link"></span></a>↓ 预览</h4>
<form style="padding: 20px;">
    <input type="radio" name="gender" id="m">
    <label for="m">Male</label>
    <input type="radio" name="gender" id="f">
    <label for="f">Female</label>
</form>
<p>单选按钮用于让用户只选择一个</p>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="checkboxes"><a aria-hidden="true" tabindex="-1" href="#checkboxes"><span class="icon icon-link"></span></a>Checkboxes</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>s<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>soc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>soc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Soccer<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>s<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Baseball<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="-预览-9"><a aria-hidden="true" tabindex="-1" href="#-预览-9"><span class="icon icon-link"></span></a>↓ 预览</h4>
<form style="padding: 20px;">
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">Soccer</label>
    <input type="checkbox" name="sports" id="baseball">
    <label for="baseball">Baseball</label>
</form>
<p>复选框允许用户选择一个或多个</p>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="select-标签"><a aria-hidden="true" tabindex="-1" href="#select-标签"><span class="icon icon-link"></span></a>Select 标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>City:<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>city<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sydney<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>option</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Melbourne<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>option</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cromwell<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>option</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>select</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="-预览-10"><a aria-hidden="true" tabindex="-1" href="#-预览-10"><span class="icon icon-link"></span></a>↓ 预览</h4>
<form style="padding: 20px">
  <label for="city">City:</label>
  <select name="city" id="city" class="border border-slate-400">
      <option value="1">Sydney</option>
      <option value="2">Melbourne</option>
      <option value="3">Cromwell</option>
  </select>
</form>
<p>选择框是选项的下拉列表</p>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="fieldset-标签"><a aria-hidden="true" tabindex="-1" href="#fieldset-标签"><span class="icon icon-link"></span></a>Fieldset 标签</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>fieldset</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>legend</span><span class="token punctuation">></span></span>Your favorite monster<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>legend</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>kra<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>kraken<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kraken<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>br</span><span class="token punctuation">/></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sas<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sasquatch<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>fieldset</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="-预览-11"><a aria-hidden="true" tabindex="-1" href="#-预览-11"><span class="icon icon-link"></span></a>↓ 预览</h4>
<form style="padding: 20px">
<fieldset class="border border-slate-400" style="padding: 20px">
  <legend>Your favorite monster</legend>
  <input type="radio" id="kra" name="monster">
  <label for="kra">Kraken</label><br>
  <input type="radio" id="sas" name="monster">
  <label for="sas">Sasquatch</label>
</fieldset>
</form>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="数据列表标签html5"><a aria-hidden="true" tabindex="-1" href="#数据列表标签html5"><span class="icon icon-link"></span></a>数据列表标签（HTML5）</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a browser: <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>browser<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Chrome<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Firefox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Internet Explorer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Opera<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Safari<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Microsoft Edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>datalist</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="-预览-12"><a aria-hidden="true" tabindex="-1" href="#-预览-12"><span class="icon icon-link"></span></a>↓ 预览</h4>
<form style="padding: 20px">
  <label for="myBrowser">Choose a browser:</label>
  <input list="browsers" id="myBrowser" name="myBrowser">
  <datalist id="browsers">
    <option value="Chrome">
    </option><option value="Firefox">
    </option><option value="Internet Explorer">
    </option><option value="Opera">
    </option><option value="Safari">
    </option><option value="Microsoft Edge">
  </option></datalist>
</form>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="提交和重置按钮"><a aria-hidden="true" tabindex="-1" href="#提交和重置按钮"><span class="icon icon-link"></span></a>提交和重置按钮</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>register.php<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name:<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>label</span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>form</span><span class="token punctuation">></span></span>
</span></code></pre>
<h4 id="-预览-13"><a aria-hidden="true" tabindex="-1" href="#-预览-13"><span class="icon icon-link"></span></a>↓ 预览</h4>
<form action="register.php" method="post" style="padding: 20px">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" &#x22;="">
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>
<p><code>将数据提交到服务器</code> 重置为默认值</p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="html-input-标签"><a aria-hidden="true" tabindex="-1" href="#html-input-标签"><span class="icon icon-link"></span></a>HTML input 标签</h2><div class="wrap-body">
<!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="input-属性"><a aria-hidden="true" tabindex="-1" href="#input-属性"><span class="icon icon-link"></span></a>Input 属性</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>输入标记是一个空元素，用于标识要从用户处获取的特定类型的字段信息。</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>?<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>?<span class="token punctuation">"</span></span> <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span>  <span class="token attr-name">required</span> <span class="token punctuation">/></span></span>
</span></code></pre>
<hr>





































































































<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>type="…"</code></td><td align="left">正在输入的数据类型</td></tr><tr><td align="left"><code>value="…"</code></td><td align="left">默认值</td></tr><tr><td align="left"><code>name="…"</code></td><td align="left">用于在 HTTP 请求中描述此数据</td></tr><tr><td align="left"><code>id="…"</code></td><td align="left">其他 HTML 元素的唯一标识符</td></tr><tr><td align="left"><code>readonly</code></td><td align="left">停止用户修改</td></tr><tr><td align="left"><code>disabled</code></td><td align="left">停止任何交互</td></tr><tr><td align="left"><code>checked</code></td><td align="left">单选或复选框是否选中</td></tr><tr><td align="left"><code>required</code></td><td align="left">是强制性的，参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/required#example">必填</a></td></tr><tr><td align="left"><code>placeholder="…"</code></td><td align="left">添加临时，请参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder#examples">::placeholder</a></td></tr><tr><td align="left"><code>autocomplete="off"</code></td><td align="left">禁用自动完成</td></tr><tr><td align="left"><code>autocapitalize="none"</code></td><td align="left">禁用自动大写</td></tr><tr><td align="left"><code>inputmode="…"</code></td><td align="left">显示特定键盘，请参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode">inputmode</a></td></tr><tr><td align="left"><code>list="…"</code></td><td align="left">关联的<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist">datalist</a>的id</td></tr><tr><td align="left"><code>maxlength="…"</code></td><td align="left">最大字符数</td></tr><tr><td align="left"><code>minlength="…"</code></td><td align="left">最小字符数</td></tr><tr><td align="left"><code>min="…"</code></td><td align="left">范围和编号上的最小数值</td></tr><tr><td align="left"><code>max="…"</code></td><td align="left">范围和编号上的最大数值</td></tr><tr><td align="left"><code>step="…"</code></td><td align="left">数字如何在范围和数字中递增</td></tr><tr><td align="left"><code>pattern="…"</code></td><td align="left">指定一个<a href="./regex.html">正则表达式</a>，请参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/pattern">pattern</a></td></tr><tr><td align="left"><code>autofocus</code></td><td align="left">集中精力</td></tr><tr><td align="left"><code>spellcheck</code></td><td align="left">执行拼写检查</td></tr><tr><td align="left"><code>multiple</code></td><td align="left">是否允许<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/multiple">多个</a>值</td></tr><tr><td align="left"><code>accept=""</code></td><td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file">file</a> 中需要文件类型上载控件</td></tr></tbody></table>
<p>请参阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attributes">&#x3C;input>元素 的属性</a></p>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="input-类型"><a aria-hidden="true" tabindex="-1" href="#input-类型"><span class="icon icon-link"></span></a>Input 类型</h3><div class="wrap-body">

















































<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>type="checkbox"</code></td><td><input type="checkbox"></td></tr><tr><td><code>type="radio"</code></td><td><input type="radio"></td></tr><tr><td><code>type="file"</code></td><td><input type="file"></td></tr><tr><td><code>type="hidden"</code></td><td><input type="hidden"></td></tr><tr><td><code>type="text"</code></td><td><input type="text"></td></tr><tr><td><code>type="password"</code></td><td><input type="password"></td></tr><tr><td><code>type="image"</code></td><td><input type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" width="70"></td></tr><tr><td><code>type="reset"</code></td><td><input type="reset"></td></tr><tr><td><code>type="button"</code></td><td><input type="button"></td></tr><tr><td><code>type="submit"</code></td><td><input type="submit"></td></tr></tbody></table>
<h4 id="html5-中的新输入类型"><a aria-hidden="true" tabindex="-1" href="#html5-中的新输入类型"><span class="icon icon-link"></span></a>HTML5 中的新输入类型</h4>

























































<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>type="color"</code></td><td><input type="color" value="#0FB881"></td></tr><tr><td><code>type="date"</code></td><td><input type="date"></td></tr><tr><td><code>type="time"</code></td><td><input type="time"></td></tr><tr><td><code>type="month"</code></td><td><input type="month"></td></tr><tr><td><code>type="datetime-local"</code></td><td><input type="datetime-local"></td></tr><tr><td><code>type="week"</code></td><td><input type="week"></td></tr><tr><td><code>type="email"</code></td><td><input type="email"></td></tr><tr><td><code>type="tel"</code></td><td><input type="tel"></td></tr><tr><td><code>type="url"</code></td><td><input type="url"></td></tr><tr><td><code>type="number"</code></td><td><input type="number"></td></tr><tr><td><code>type="search"</code></td><td><input type="search"></td></tr><tr><td><code>type="range"</code></td><td><input type="range"></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="input-css-选择器"><a aria-hidden="true" tabindex="-1" href="#input-css-选择器"><span class="icon icon-link"></span></a>Input CSS 选择器</h3><div class="wrap-body">













<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><code>input:focus</code></td><td>当键盘聚焦时</td></tr></tbody></table>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="html-meta-标签"><a aria-hidden="true" tabindex="-1" href="#html-meta-标签"><span class="icon icon-link"></span></a>HTML meta 标签</h2><div class="wrap-body">
<!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist row-span-5"><div class="wrap-header h3wrap"><h3 id="meta-标签"><a aria-hidden="true" tabindex="-1" href="#meta-标签"><span class="icon icon-link"></span></a>Meta 标签</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-5-->
<p>meta 标记描述 HTML 文档中的元数据。它解释了关于 HTML 的其他材料。</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 标题 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>title</span><span class="token punctuation">></span></span>···<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>title</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:title<span class="token punctuation">"</span></span>  <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:title<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- url --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>canonical<span class="token punctuation">"</span></span>       <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:url<span class="token punctuation">"</span></span>  <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 描述 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span>         <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>网页描述···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:description<span class="token punctuation">"</span></span>  <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- image --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image<span class="token punctuation">"</span></span>  <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- ua --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge,chrome=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- viewport --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=1024<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 重定向 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refresh<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5;url=http://example.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>robots<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index,follow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>generator<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>网站生成工具<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>csrf-token<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>token值<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="常用-meta"><a aria-hidden="true" tabindex="-1" href="#常用-meta"><span class="icon icon-link"></span></a>常用 Meta</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>网页描述···<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>关键词1,关键词2,关键词3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>author<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>作者名<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="常用-meta-1"><a aria-hidden="true" tabindex="-1" href="#常用-meta-1"><span class="icon icon-link"></span></a>常用 Meta</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shortcut icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon.ico<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/x-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon.png<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/jpeg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="open-graph"><a aria-hidden="true" tabindex="-1" href="#open-graph"><span class="icon icon-link"></span></a>Open Graph</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>website<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:locale<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en_CA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:title<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML cheatsheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://jaywcjlove.github.io/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://xxx.com/image.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:site_name<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name of your website<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Description of this page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<p>Facebook、Instagram、Pinterest、LinkedIn 等使用。</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="twitter-卡片"><a aria-hidden="true" tabindex="-1" href="#twitter-卡片"><span class="icon icon-link"></span></a>Twitter 卡片</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:card<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>summary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:site<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@QuickRef_ME<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:title<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HTML cheatsheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:url<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://jaywcjlove.github.io/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Description of this page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twitter:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://xxx.com/image.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary">Twitter 卡片文档</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="geotagging"><a aria-hidden="true" tabindex="-1" href="#geotagging"><span class="icon icon-link"></span></a>Geotagging</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ICBM<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>45.416667,-75.7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>geo.position<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>45.416667;-75.7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>geo.region<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ca-on<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>geo.placename<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Ottawa<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
<p>请参阅：<a href="https://en.wikipedia.org/wiki/Geotagging#HTML_pages">Geotagging</a></p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="标签语义化"><a aria-hidden="true" tabindex="-1" href="#标签语义化"><span class="icon icon-link"></span></a>标签语义化</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="复杂布局"><a aria-hidden="true" tabindex="-1" href="#复杂布局"><span class="icon icon-link"></span></a>复杂布局</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre><code class="code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;header>                                ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;nav>                                   ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;section>                               ┆
</span><span class="code-line">┆╭┈┈┈┈┈┈┈┈╮╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮┆
</span><span class="code-line">┆┆&#x3C;aside> ┆┆ &#x3C;main>                      ┆┆
</span><span class="code-line">┆┆        ┆┆╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮┆┆
</span><span class="code-line">┆┆        ┆┆┆  &#x3C;article>    ┆ ┆ &#x3C;aside> ┆┆┆
</span><span class="code-line">┆┆        ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆         ┆┆┆
</span><span class="code-line">┆┆        ┆┆┆ ┆ &#x3C;header>  ┆ ┆ ┆         ┆┆┆
</span><span class="code-line">┆┆        ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆         ┆┆┆
</span><span class="code-line">┆┆        ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆         ┆┆┆
</span><span class="code-line">┆┆        ┆┆┆ ┆ &#x3C;article> ┆ ┆ ┆         ┆┆┆
</span><span class="code-line">┆┆        ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆         ┆┆┆
</span><span class="code-line">┆┆        ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆         ┆┆┆
</span><span class="code-line">┆┆        ┆┆┆ ┆ &#x3C;footer>  ┆ ┆ ┆         ┆┆┆
</span><span class="code-line">┆┆        ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆         ┆┆┆
</span><span class="code-line">┆┆        ┆┆╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯┆┆
</span><span class="code-line">┆╰┈┈┈┈┈┈┈┈╯╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ &#x3C;footer>                                ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="复杂布局-1"><a aria-hidden="true" tabindex="-1" href="#复杂布局-1"><span class="icon icon-link"></span></a>复杂布局</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre><code class="code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆  &#x3C;header>                           ┆
</span><span class="code-line">┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ┆
</span><span class="code-line">┆  ┆  &#x3C;nav>                        ┆  ┆
</span><span class="code-line">┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ 
</span><span class="code-line">┆  &#x3C;main>                             ┆ 
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮  ┆ 
</span><span class="code-line">┆ ┆  &#x3C;article>       ┆ ┆  &#x3C;aside>  ┆  ┆ 
</span><span class="code-line">┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆  ┆ 
</span><span class="code-line">┆ ┆ ┆ &#x3C;header>  ┆    ┆ ┆           ┆  ┆ 
</span><span class="code-line">┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆  ┆ 
</span><span class="code-line">┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆  ┆ 
</span><span class="code-line">┆ ┆ ┆ &#x3C;section> ┆    ┆ ┆           ┆  ┆ 
</span><span class="code-line">┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆  ┆ 
</span><span class="code-line">┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆  ┆ 
</span><span class="code-line">┆ ┆ ┆ &#x3C;footer>  ┆    ┆ ┆           ┆  ┆ 
</span><span class="code-line">┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆  ┆ 
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯  ┆ 
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ 
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆  &#x3C;footer>                           ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="区域语义化"><a aria-hidden="true" tabindex="-1" href="#区域语义化"><span class="icon icon-link"></span></a>区域语义化</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆  &#x3C;main>          ┆ ┆  &#x3C;aside>  ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆
</span><span class="code-line">┆ ┆ &#x3C;header>  ┆    ┆ ┆           ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆
</span><span class="code-line">┆ ┆ &#x3C;section> ┆    ┆ ┆           ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆
</span><span class="code-line">┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆
</span><span class="code-line">┆ ┆ &#x3C;footer>  ┆    ┆ ┆           ┆
</span><span class="code-line">┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="页面头语义化"><a aria-hidden="true" tabindex="-1" href="#页面头语义化"><span class="icon icon-link"></span></a>页面头语义化</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆  &#x3C;header>                           ┆
</span><span class="code-line">┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ┆
</span><span class="code-line">┆  ┆  &#x3C;section>                    ┆  ┆
</span><span class="code-line">┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ┆
</span><span class="code-line">┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮  ┆
</span><span class="code-line">┆  ┆  &#x3C;nav>            ┆ ┆ &#x3C;aside> ┆  ┆
</span><span class="code-line">┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯  ┆
</span><span class="code-line">┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ┆
</span><span class="code-line">┆  ┆  &#x3C;footer>                     ┆  ┆
</span><span class="code-line">┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
<ul>
<li><a href="https://www.w3.org/TR/REC-html40/cover.html#minitoc">HTML 4.01 Specification</a> <em>(w3.org)</em></li>
<li><a href="https://wangchujiang.com/html-tutorial/">HTML Tutorial</a> <em>(jaywcjlove.github.io)</em></li>
<li><a href="./emmet.html">Emmet 备忘清单，提升 HTML 和 CSS 代码编写的工具包</a> <em>(jaywcjlove.github.io)</em></li>
</ul>
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang.</footer></footer><script src="..\/data.js?v=1.4.1" defer></script><script src="..\/js/fuse.min.js?v=1.4.1" defer></script><script src="..\/js/main.js?v=1.4.1" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
  <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>
